import React from 'react'
import ReactDOM from 'react-dom'

/**
 * jsx 列表渲染
 * 
 * 使用 map 方法实现数组的渲染
 * 给渲染出来的元素加上 key, key 建议使用后台返回的 id，
 */

const heros = [
  { id: 1, name: '亚瑟' },
  { id: 2, name: '妲己' },
  { id: 3, name: '百里玄策' },
]

const heroList = (
  <ul>
    {
      // 注意：在 map 方法内部，推荐使用 () 对元素进行包裹
      // 必须确保 map 方法内部能够返回表达式

      // 第一种写法(建议写法)，使用 () 对元素进行包裹
      heros.map(item => (<li key={item.id}>{item.name}</li>))

      // 第二种写法，在 map 内部使用 return 返回结果
      // heros.map(item => {
      //   return (<li key={item.id}>{item.name}</li>)
      // })
    }
  </ul>
)

ReactDOM.render(heroList, document.getElementById('root'))
